<template>
  <div class="box">
    <listVue :data="data">
      <list-column-vue
        v-for="(item, i) in columns.values"
        :key="item.id + columns.keys[i]"
        :label="labels[i]"
        :stripe="stripe"
        :data="item"
      ></list-column-vue>
      <slot></slot>
    </listVue>
  </div>
</template>
<script>
import listVue from './list.vue'
import listColumnVue from './list-column.vue'
export default {
  name: 'ComponentName',
  props: {
    data: {
      type: Array,
      default() {
        return []
      },
    },
    labels: {
      type: Array,
      default() {
        return []
      },
    },
    stripe: {
      type: Boolean,
      default() {
        return false
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    columns() {
      const datas = this.data.reduce((pre, next) => {
        for (const key in next) {
          if (!pre[key]) {
            pre[key] = [next[key]]
          } else {
            pre[key].push(next[key])
          }
        }
        return pre
      }, {})
      const keys = Object.keys(datas)
      const values = Object.values(datas)
      return {
        keys,
        values,
      }
    },
  },
  methods: {},
  components: { listVue, listColumnVue },
  filters: {},
  watch: {},
  created() {},
  mounted() {},
}
</script>
<style lang="less" scoped></style>
